<template>
  <transition name="el-fade-in-linear">
    <div class="container">
      <div class="fm-warp mtop-20">
        <div class="header">
          <div class="mbuttom-10">
            <h1 class="font-24">{{ playlist[playlistIndex].name}}</h1>
          </div>
          <div class="fs-12">专辑:<span style="color: #5d86b5">&nbsp;&nbsp;{{ playlist[playlistIndex].al.name }}</span>
          </div>
          <div class="fs-12">歌手:<span style="color: #5d86b5">&nbsp;&nbsp;{{ playlist[playlistIndex].ar[0].name  }}</span></div>
        </div>
      </div>
      <div class="lyic-warp">
        <div class="left"
             v-if="FMlist">
          <img :src="playlist[playlistIndex].al.picUrl"
               class="br-8">
          <div class="play-btn  pointer"
               :class="{'play-btn_active':!isBtnShow}">
            <i v-show="isBtnShow"
               class="iconfont icon-bofang"></i>
            <i v-show="!isBtnShow"
               class="iconfont icon-zanting"></i>
          </div>
          <div class="btn-wrap mtop-20">
            <button class="pfm-btn"
                    @click="likeMusic">
              <i class="iconfont icon-aixin"
                 v-show="!isLiked"></i><i class="iconfont icon-aixin1"
                 v-show="isLiked"
                 style="color: red"></i>
            </button>
            <el-popconfirm title="确定将当前音乐移到垃圾桶吗？"
                           @confirm="remove">
              <button slot="reference"
                      class="pfm-btn">
                <i class="el-icon-delete"></i>
              </button>
            </el-popconfirm>
            <button class="pfm-btn"
                    @click=" nextMusic">
              <i class="iconfont icon-xiayishou"></i>
            </button>
            <button class="pfm-btn"><i class="el-icon-more"></i></button>
          </div>
        </div>
        <div class="right">
          <Lyrics :musicId="playlist[playlistIndex].id"
                  :active="true"></Lyrics>
        </div>
      </div>
      <div class="fm-comment mtop-20">
        <comment :type="0"
                 :active="true"
                 :id="playlist[playlistIndex].id"></comment>
      </div>
    </div>
  </transition>
</template>

<script>
import { getLike } from "@/api/User"
import comment from '@/components/comment/comment.vue';
import Lyrics from '@/components/MusicDetail/Lyrics.vue'
import { mapState, mapMutations } from 'vuex';
export default {
  components: { Lyrics, comment },
  data () {
    return {
      FMlist: [],
      id: '',
    }
  },
  computed: {
    ...mapState({
      playlist: (state) => {
        return state.playlist.playlist;
      },
      playlistIndex: (state) => {
        return state.playlist.playlistIndex;
      },
      isBtnShow: (state) => {
        return state.playlist.isBtnShow;
      },
      likeList: (state) => {
        return state.user.likeList
      },
      musicId: (state) => {
        return state.playlist.musicId
      },
    }),
    isLiked: {
      get () {
        return this.likeList.indexOf(this.musicId) !== -1
      },
      set (val) {
        console.log(this.isLiked)
        if (this.isLiked) {
          this.$store.commit('setLikeList', {
            type: 'remove',
            data: val
          })
        } else {
          this.$store.commit('setLikeList', {
            type: 'unshift',
            data: val
          })
        }
      }
    }
  },
  created () {
    this.getPersonalFm()

  },
  mounted () {

  },
  methods: {
    ...mapMutations(['updatedisBtnShow', 'updatedCurrentTime', 'updatedPlaylistIndex', 'updatedDuration', 'upMusicId', 'setLikeList']),
    // 触发获取私人fm
    getPersonalFm () {
      if (this.playType !== 'personalFm')
        this.$store.dispatch('personalFm', { type: 'get' })
    },
    //下一首
    nextMusic () {
      this.$store.dispatch('personalFm', { type: 'next' })
    },
    /* 喜欢音乐 */
    async likeMusic () {
      var isLogin = JSON.parse(localStorage.getItem('isLogin'))
      if (!isLogin) return this.$message.warning('需要登录')
      if (this.musicId === 0 || typeof this.musicId === 'undefined')
        return
      const res = await getLike(this.musicId, !this.isLiked)
      if (res.code !== 200) return
      this.$message.success(`${this.isLiked ? '取消喜欢' : '喜欢'}成功`)
      this.isLiked = this.musicId
    },
    // 删除音乐
    remove () {
      this.$store.dispatch('personalFm', {
        type: 'remove',
        id: this.musicId
      })
    }
  },
  watch: {
    musicId (val) {
      /* 监听ID，改变后重新获取数据 */
      console.log('fm的资源ID改变了', val, this.musicId, this.playlistIndex)
      if (!val) return
      this.hotList = []
      this.$bus.$emit('currentId', this.playlist[this.playlistIndex].id)
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 710px;
  margin: 0 auto;
  .fm-warp {
    display: flex;
    justify-content: right;
    align-items: center;
    .header {
      width: 60%;
      height: 100px;
    }
  }
  .lyic-warp {
    display: flex;
    justify-content: space-around;
    .left {
      position: relative;
      width: 260px;
      height: 300px;
      background-color: #fff;
      img {
        width: 260px;
        height: 260px;
      }
      .play-btn {
        position: absolute;
        right: 100px;
        bottom: 140px;
        background-color: #fbf7f6;
        color: #ec4141;
        box-sizing: border-box;
        border: 1px solid #eeeeee;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 0.8s;
        i {
          font-size: 20px;
        }
      }
      .btn-wrap {
        display: flex;
        justify-content: space-between;
        .pfm-btn {
          outline: none;
          border: 1px solid #e7e7e7;
          background-color: #fff;
          color: #8c8c8c;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          &:hover {
            background-color: #f5f5f5;
          }
          i {
            font-size: 20px;
          }
        }
      }
      .play-btn_active {
        right: 20px;
        bottom: 60px;
      }
    }
    .right {
      width: 340px;
      height: 370px;
    }
  }
}
</style>